<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
  <title>SEVENTEEN - dynamic</title>
  <link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="./js/swiper/swiper.min.css" />
  <link rel="stylesheet" href="./css/animation.css">
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./css/style.css" />
  <script src="./js/swiper/swiper.min.js"></script>
  <script src="./js/common/vue.3.2.js"></script>
</head>

<body>
  <div id="ny">
    <!-- Header -->
  <header class="header up-move-down">
    <div class="container">
      <a href="index.html" class="logo">
        <img src="./images/logo.png" alt="SEVENTEEN" />
      </a>

      <nav class="main-nav">
        <ul class="top">
          <li><input type="text" placeholder="输入查找项..."></li>
          <li><a href="#"><i class="fa fa-search"></i></a></li>
        </ul>
        <ul class="bottom">
          <li><a href="index.html" class="active">首页</a></li>
          <li>
            <a href="detail.html">关于</a>
            <ul class="menu-2 bown-move-up">
              <li><a href="news.html">相关新闻</a></li>
              <li><a href="dynamic.html">近期动态</a></li>
            </ul>
          </li>
          <li><a href="news.html">相关新闻</a></li>
          <li><a href="dynamic.html">近期动态</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </nav>
    </div>
  </header>

    <!-- banner -->
    <section class="ny-banner">
      <img class="wh-full" src="./images/banner2.png" alt="">
    </section>

    <!-- location -->
    <section class="location">
      <div class="lw">
        <div class="location-full animate-left-move-right">
          <a href="/index">首页</a>
          &gt;<a href="/about">近期动态</a>
        </div>
        <div class="location-nav animate-left-move-right">
          <h1>近期动态</h1>
          <ul>
            <li ><a href="detail.html">关于</a></li>
            <li ><a href="news.html">相关新闻</a></li>
            <li class="act"><a href="dynamic.html">近期动态</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>
        </div>
      </div>
    </section>

    <!-- dynamic -->
     <section id="dynamic">
      <div class="lw animate-down-move-up">
        <div class="dynamic-intro">
          <div class="img">
            <img class="wh-full" :src="`./images/${list[0].img}`" alt="">
          </div>
          <div class="info animate-right-move-left">
            <h1 class="animate-right-move-left">{{list[0].title}}</h1>
            <p class="animate-right-move-left" v-html="list[0].info"></p>
          <a href="#" class="more animate-right-move-left">More Detials →</a>
          </div>
        </div>

        <ul class="dynamic-list">
          <template v-for="(item,index) in list">
            <li class="animate-down-move-up" v-if="index>0" >
              <a href="" class="wh-full flex" >
                <div class="img animate-left-move-right">
                  <img class="wh-full" :src="`./images/${item.img}`" alt="">
                </div>
                <div class="info">
                  <div>
                    <h1 class="animate-right-move-left">{{item.title}}</h1>
                    <p class="animate-right-move-left" v-html="item.info"></p>
                  </div>
                  <h2 class="animate-right-move-left">2025-05-01</h2>
                </div>
              </a>
            </li>
          </template>
        </ul>
      </div>
     </section>

     <script type="module">
      var app = Vue.createApp({
        data() {
          return {
            list: [
              {
                title: `Exclusive: SEVENTEEN's HOSHI is Ready for You To Step Into His Web with Solo Mixtape "Spider"`,
                info: `As SEVENTEEN's performance unit leader, HOSHI knows how to put on a show. So of course the CARATs are excited to see that he’s stepping out on his own.Fresh off of the band's best-selling special album, ; [Semicolon], HOSHI is getting ready for his next step as a solo artist: his first mixtape. "Spider" has been getting fans excited ever since it was first announced on March 26 with the first teaser getting over 1.5 million views in 24 hours. Not only does it show the power of the CARATs and SEVENTEEN as a band, but how much buzz is around HOSHI as he steps into the limelight. And trust us when we say, he's totally ready for it.`,
                img: 'dt1.jpg'
              },
              {
                title: '顺荣捐赠天使',
                info: `2020年<br>
                       3月为防止新冠扩散悄悄捐赠5000万韩元<br>
                       4月为克服新冠给南杨州市捐赠杀菌消毒水<br>
                       10月为后辈们的梦想应援，给母校捐赠奖学金2310万韩元`,
                img: 'dt2.jpg' 
              },
              {
                title: '顺荣捐赠天使',
                info:`2021年<br>
                      6月给南杨州市困难人群捐赠1亿韩元<br>
                      🐯：「因为小时候经济上很困难，为了不让同样困难的邻人失去希望，想成为他们的力量」<br>
                      11月给南杨州市低收入家庭捐赠1万块蜂窝煤<br>
                      12月南杨州市给HOSHI赠予“捐赠文化活性化贡献”感谢牌`,
                img: 'dt3.jpg' 
              },
              {
                title: '顺荣捐赠天使',
                info: `2022年<br>
                       9月为了地区内的青少年，<br>
                       向南杨州市이석영新媒体图书馆捐赠5000万韩元`,
                img: 'dt4.jpg' 
              },
              {
                title: '顺荣捐赠天使',
                info: `2024年<br>
                       2月为国内外困难儿童和青少年捐赠1亿韩元<br>
                       12月为支持老挝孤儿学校教育基础设施建设捐赠1亿韩元<br>
                       权顺荣于五年间不停对社会上需要帮助的人群进行捐赠，仅捐赠资金已超42,310万韩元（约合RMB 213万）`,
                img: 'dt5.jpg' 
              }
            ]
          };
        },
        mounted() {
          this.init()
        },
        methods: {
          init() {
            console.log('vue已挂载');
          }
        },
      })
      app.mount("#dynamic");
    </script>



    <!-- Footer -->
  <footer class="footer">
    <div class="lw">
      <div class="footer-top">
        <img class="logo" src="./images/logo.png" alt="">
        <p>本网站上的所有文字、图片和其他内容均为 © xxxxx 版权所有，保留所有权利。</p>
      </div>
      <div class="footer-bottom">
        <div class="title">
          <h1>联系我们</h1>
          <a href="#" class="wxIcon">
            <i class="fa fa-weixin"></i>
          </a>
        </div>
        <div class="content">
          <p>地址: xx省 xx市 xxxxx地址</p>
          <p>邮政编码:123456</p>
          <p>传真号码:86-512-12345678</p>
          <p>联系电话:86-512-12345678</p>
          <p style="text-align: right;">©2025 xxxx 版权所有</p>
        </div>
      </div>
    </div>
  </footer>

  </div>

  <!-- JavaScript -->
  <script src="./js/common.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      initAll()
    })
  </script>
</body>

</html>